@use "sass:math";

.category-selector{
  @include border-radius($radius-mobile);
  padding: 10px;
  background-color: white;
  border-bottom: 1px solid $bg-light;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  .category{
    @extend .unselectable;
    @include border-radius(5px);
    padding: 5px 10px;
    margin: 5px;
    flex-shrink: 0;
    display: block;
    font-weight: bold;
    cursor: pointer;
    font-size: $fz-label;
    text-align: center;
    &:hover{
      background-color: $bg-light;
    }
  }

  @each $name, $color in $categories {
    .category-#{$name}{
      color: $color;
    }
    .category-#{$name}.active{
      background-color: $color;
      color: white;
    }
  }
}

@media (min-width: $grid-separate-width-max){
  $gaps: 4%;
  $cols: 5;
  .category-selector {
    padding: 15px;
    @include border-radius($radius-pc);
    justify-content: flex-start;
    .category{
    }
  }
}


// max
@media (min-width: $grid-separate-width-big) and (max-width: $grid-separate-width-max) {
  .category-selector{
    .category{
    }
  }
}

// IPAD
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .category-selector{
    .category{
    }
  }
}

// MOBILE
@media (max-width: $grid-separate-width-md) {
  .category-selector{
    justify-content: flex-start;
    .category{
    }
  }
}

